<template>
    <div>
        <h1>总经理管理视图化界面</h1>
        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="10">
                <div class="grid-content bg-purple-light">
                    <div id="main" style="width: 800px; height: 400px"></div>
                </div>
            </el-col>
            <el-col :span="10">
                <div class="grid-content bg-purple">
                    <div id="main2" style="width: 800px; height: 400px"></div>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import * as echarts from "echarts";
export default {
    name: "c1",
    data() {
        return {
            echartsList: [],
            list1: [],
            list2: [],
        }
    },
    mounted() {
        this.getEchartDate();
        this.histogram();
    },
    methods: {
        histogram() {
            this.$axios.get("contract/histogram")
                .then(res => {
                    this.list1 = res.data.data.list1;
                    this.list2 = res.data.data.list2;
                    this.getchar2();

                })
                .catch((error) => {
                    this.$message.error("系统出错，请稍后再试")
                })
        },
        getchar2() {
            var chartDom = document.getElementById("main2");
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                title: {
                    text: '贷款产品类型图',
                    subtext: '金融借贷公司',
                    left: 'center'
                },
                xAxis: {
                    type: "category",
                    data: this.list1,
                },
                yAxis: {
                    type: "value",
                },
                series: [
                    {
                        data: this.list2,
                        type: "bar",
                    },
                ],
            };
            option && myChart.setOption(option);
        },
        getEchartDate() {
            this.$axios
                .post("overDue/seleChart")
                .then((res) => {
                    if (res.data.code == 200) {
                        this.echartsList = res.data.data.echartsList;
                        this.getChar();
                    }
                });
        },
        getChar() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = this.$echarts.init(document.getElementById("main"));
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '借款全况图',
                    subtext: '金融借贷公司',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'debit pie',
                        type: 'pie',
                        radius: '50%',
                        data: this.echartsList,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },

    },
};
</script>
<style scoped>
/* #main2{
  float: right;  
} */
</style>